<template>
  <div>
    <t-navbar title="添加计划" :fixed="false" left-arrow @left-click="back" />
  </div>
  <div>
    <t-input label="计划:" v-model="dotolist.summarize" placeholder="请输入文字"></t-input>
    <t-input label="详细:" v-model="dotolist.content" placeholder="请输入文字"></t-input>
    <t-cell title="选择截止日期" :note="pickerValueText || '年 月 日'" @click="visible = true" />
    <t-popup v-model="visible" placement="bottom">
      <t-date-time-picker
          :value="pickerValue"
          :mode="['date']"
          title="选择日期"
          start="2020-6-30"
          end="2025-6-30"
          format="YYYY-MM-DD"
          @change="onChange"
          @pick="onPick"
          @confirm="onConfirm"
          @cancel="onCancel"
      />
    </t-popup>
    <div style="height: 80px ;margin-top:30px">
      <t-radio-group class="box" v-model="dotolist.type"  :default-value="dotolist.type" borderless @change="groupChangeFn">
        <t-radio :block="false" name="radio" value="1" label="日计划" />
        <t-radio :block="false" name="radio" value="2" label="周计划" />
        <t-radio :block="false" name="radio" value="3" label="月计划" />
        <t-radio :block="false" name="radio" value="4" label="年计划" />
      </t-radio-group>
    </div>
    <div style="margin-top: 10px">
      <t-button theme="primary"  @click="tz" block>添加</t-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
import {get,post} from'../util/Request'
import {Result, Toast} from "tdesign-mobile-vue";
import axios from "axios";
// const radio = ref('4');
// const groupChangeFn = (value, context: { e: Event }) => {
//   console.log(value, context);
// }


const router=useRouter()
const dotolist =ref({
  type:"",
  status:"",
  summarize:"",
  content:"",
  endTime:""
})
// console.log(dotolist);
const back=()=>{
  history.back()
}

const tz=()=>{
  post("/todolist/addTodolist",dotolist.value).then(r=>{
    if (r.code==0){
      Toast("添加成功")
    }else {
      Toast(r.data)
    }
  })
  // post("/todolist/addTodolist", dotolist.value).then((r=>{})

  // console.log([dotolist].value);

}
// axios.post("http://localhost:8080/todolist/addTodolist",dotolist).then(Response=>{
//   console.log('POST请求成功:', Response.data);
// }).catch(Error=>{
//   console.error('POST请求失败:', Error);
// })
const visible = ref(false);
const pickerValue = ref('2021-12-23');
const pickerValueText = ref('');
const onChange = (value) => {
  dotolist.endTime=value;

  // console.log('change: ', value,dotolist);

};

const groupChangeFn = (value) => {
  dotolist.type=value;

  // console.log('change: ', value,dotolist);

};

const onPick = (value) => {
  console.log('pick: ', value);
};

const onCancel = () => {
  console.log('cancel');
  visible.value = false;
};

const onConfirm = (value) => {
  console.log('confirm: ', value);
  pickerValue.value = value;
  pickerValueText.value = value;
  visible.value = false;
};
</script>

<style lang="less" scoped>

.textarea-example {
  height: 240px;

}

/*.radio-group-demo {*/
/*  background-color: var(--bg-color-demo, #fff);*/
/*}*/

/*.box {*/
/*  padding: 16px;*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  background-color: var(--bg-color-demo, #fff);*/
/*}*/



</style>